<template>
    <div class="replys">
        <div>
            <divider>
                <h3 style="margin: 0 0;">{{ wenzhang.title}}</h3>
            </divider>
            <div style="margin: 0 2%;box-shadow: -1px -1px 5px #12a7b4;">
                <div style="padding-left:2%;padding-bottom:2%">
                    <p style="padding:3px 0">
                        <img style="width:10%" :src="/static/+ wenzhang.game_id + '.png'" alt="">
                        <a href="">
                            <span>{{wenzhang.author.username.substring(0,4)}}</span>
                        </a>
                        <span style="color:#aaa;padding:4px 3px;box-shadow: 1.5px .5px 3px 0.5px #12a7b4 inset;background:wheat">楼主</span>
                        <span style="color:#aaa">·{{wenzhang.create_time}}</span>
                        <span style="color:#aaa;margin-left:10px">
                            <i style="color:red" class="fa fa-moon-o ">
                                {{wenzhang.click_num}}
                            </i>
                        </span>
                    </p>
                    <p class="dierhang" style="padding:3px 0">
                        <a href="">
                            <span>回复</span>
                        </a>
                        <a href="">
                            <span>只看楼主</span>
                        </a>
                        <a href="">
                            <span>正序排列</span>
                        </a>
                        <a href="">
                            <span>举报</span>
                        </a>
                    </p>
                    <div class="coonent">
                        <divider>
                            <span>Tap</span>
                         </divider>
                         {{wenzhang.content}}
                    </div>
                    <p class="fonts">
                        <a v-if="show1" style="background:red" @click="shoucang" :name="wenzhang._id" href="" title="加入收藏">
                            <span class="fa fa-heart-o">
                            </span>
                        </a>
                        <a v-else @click="shoucang" :name="wenzhang._id" href="" title="加入收藏">
                            <span class="fa fa-heart-o">
                            </span>
                        </a>
                        <a href="">
                            <span class="fa fa-thumbs-o-up">

                            </span>
                        </a>
                        <a href="">
                            <span class="fa fa-thumbs-o-down">
                            </span>
                        </a>
                        <a href="">
                            <span>
                                <i class="fa fa-commenting-o"></i>
                                {{wenzhang.comment_num}}
                            </span>
                        </a>
                    </p>
                </div>
            </div>
            <!-- <p>
                 {{wenzhang}}
             </p> -->
            <div style="text-align: center;margin: 4% 2%;box-shadow: -1px -1px 5px #12a7b4;">
                <divider>
                    {{ '广告位出租'}}
                </divider>
                <p>1</p>
            </div>
            <!-- //回复 -->
            <div style="margin: 4% 2%;box-shadow: -1px -1px 5px #12a7b4;">
                <divider>
                    {{ '最新回复'}}
                </divider>
                <ul class="HuiFu" v-for="(item,index) in wenzhanghuifu">
                    <li>
                        <p class="pimg">
                            <a :href="'#/paihang'+item._id">
                                <img style="width:100%" src="/static/3.png" alt="">
                            </a>
                        </p>
                        <div class="username">
                            <p style="margin:0 0;overflow: hidden;font-weight:100;font-size:20px;padding-left:15px;">
                                {{item.author.username.substring(0,4)}}
                                <span style="font-weight:100;font-size:16px;float: right;color:#aaa">#{{index}}</span>
                            </p>
                            <!-- <p  style="margin:0 0;padding-left:15px;">{{item.content.substring(0,item.content.length -1)}}</p> -->
                            <!-- <p  style="margin:0 0;padding-left:15px;font-weight:600;">{{item.content.substring(0,item.content.length -1)}}</p> -->
                            <p  style="margin:0 0;padding-left:15px;">
                                <i>{{item.content.substring(0,item.content.length -1)}}</i>
                            </p>
                            <p class="icom" style="padding-left:15px;margin-top:3%">
                                <span>{{item.create_time.substring(5,7)}}月{{item.create_time.substring(8,10)}}日</span>
                                <span>
                                    <button :name="item._id" @click="erji" style="border:none;padding:0">
                                        <i class="fa fa-commenting-o"></i>
                                        回复
                                    </button>
                                </span>
                                <span>
                                    <a href="" class="fa fa-thumbs-o-up">

                                    </a>
                                </span>

                                <span>
                                    <a href="" class="fa fa-thumbs-o-down">

                                    </a>
                                </span>
                                <span>
                                    <a href="">
                                        举报
                                    </a>
                                </span>
                                <span>
                                  <button :name="item._id" @click="erjii" style="border:none;padding:0">
                                    {{item.comment_num}}
                                  </button>
                                </span>
                            </p>
                        </div>
                    </li>
                </ul>
                <divider>
                    <i>我是有底线的</i>
                </divider>
            </div>
            <div style="margin: 6% 2%;">
                <h4 style=" margin-bottom:-10px;">发表回复</h4>
                <group>
                    <x-textarea :max="20" v-model="recontent" :placeholder="$t('placeholder')" @on-focus="onEvent('focus')" @on-blur="onEvent('blur')"></x-textarea>
                </group>
                <p class="yangshi" style="background: white;border-top: solid 1px #aaa">
                    <span v-if="show2" style="color:#12a7b4" @click="bbb">
                        B
                    </span>
                    <span v-else @click="bbb">
                        B
                    </span>

                    <span v-if="show3" style="color:#12a7b4" @click="iii">
                        <i>I</i>
                    </span>
                    <span v-else @click="iii">
                        <i>I</i>
                    </span>
                    <span>
                        U
                    </span>
                    <span>
                        C
                    </span>
                </p>
                <p style="float:right;margin-right:2%">
                    <button :name="wenzhang.author._id" @click="whuifu" style="border:none;background:#12a7b4;color:white;box-shadow: -1px -1px 5px #12a7b4;"
                        type="submit">回复</button>
                </p>
            </div>
        </div>
        <div class="qiang">
          <div style="margin-bottom:15px;">
            <popup v-model="show8" position="bottom" height="70%" style="margin-bottom:15%;background:transparent;">
              <div class="position-horizontal-demo">
                <!-- <span class="vux-close" @click="show8 = false"></span> -->
                <div class="Twice" style="width:90%;background:transparent;margin:0 5%">
                  <img class="Logo" style="background:#12a7b4;width:50%" src="/static/logo.png" alt="">
                </div>
                <div class="Twice1" style="padding-top:8%;background:white;width:95%;margin:0 auto">
                  <divider>
                    <i>小伙子，要文明</i>
                  </divider>
                    <ul>
                      <li style="padding:3% 2%; overflow: hidden;background:#12a7b4;">
                        <i style="float:left;color:white">
                           {{Twicereply.bereply_id.username.substring(0,4)}}
                        </i>
                        <i style="color:yellow;float:left;margin-left:38%;" class="fa fa-reply"></i>
                        <span style="font-weight:600;float:right;color:white">
                          <!-- <i>我</i> -->
                          {{Twicereply.author.username.substring(0,4)}}
                        </span>
                        <br>
                        <p style="padding:2% 3%;color:white">
                          <span>
                            回复：{{Twicereply.content}}
                          </span>
                        </p>
                      </li>
                      <div class="sBtu" style="overflow: hidden;">
                        <group>
                          <x-textarea :max="30" v-model="ZhenTwice" :placeholder="$t('提下您的宝贵意见')" @on-focus="onEvent('focus')" @on-blur="onEvent('blur')"></x-textarea>
                        </group>
                        <button @click="showsw"  style="margin-left:2%;float:left;border: solid 1px #12a7b4;background:white;" type="submit">取消</button>
                        <button @click="TwiceReply" :name="Twicereply._id"  style="margin-right:2%;float:right;border: solid 1px #12a7b4;background:#12a7b4;;color:white" type="submit">提交</button>
                      </div>
                    </ul>
                    
                </div>
              </div>
            </popup>
          </div>
        </div>

        <div class="qiang">
          <div style="">
            <popup v-model="show9" position="top" height="80%" style="margin-top:26%;background:transparent;">
              <div class="position-horizontal-demo">
                <span class="vux-close" @click="show9 = false"></span>
                <div class="Twice" style="width:90%;background:transparent;margin:0 5%">
                  <img class="Logo" style="background:#12a7b4;width:50%;" src="/static/logo.png" alt="">
                </div>
                <div class="Twice1" style="padding-top:5%;background:#E6F5CF;width:95%;margin:0 auto;height:100%;">
                  <divider>
                    <i>小伙子，要文明</i>
                  </divider>
                  <ul v-for="(item,index) in zhentwohuifu" style="width:90%;margin:0 auto;">
                    <li style="background:#D0F19F;box-shadow: -1px -1px 5px #D0F19F;">
                      <p style="margin:0 6%;margin-top:5%;font-size:18px;overflow: hidden;">
                        <b style="float:left"><small style="font-size:10px;color:#BFC4B8">#{{index}}</small>{{item.author.username}}</b>
                         <i style="color:#46D9CF;float:left;margin-left:30%;margin-top:3px;" class="fa fa-mail-forward"></i>
                        <span style="float:right;font-size:15px;color:#BFC4B8">{{item.bereply_id.username}}</span>
                      </p>
                      <p style="margin:1% 22%;padding-bottom:10px">回复 {{item.content}}</p>
                    </li>
                  </ul>
                </div>
              </div>
            </popup>
          </div>
        </div>

        <!-- ============= -->
    </div>
</template>
<script>
import {
  Divider,
  XTextarea,
  Group,
  XInput,
  XButton,
  Popup,
  TransferDom
} from "vux";
export default {
  data() {
    return {
      wenzhang: { author: { username: "" } },
      show1: false,
      styleB: {
        "font-weight": "900"
      },
      show2: false,
      show3: false,
      num: 1,
      num2: 1,
      recontent: "",
      yangshi: [],
      show1: true,
      show4: false,
      show5: false,
      show6: false,
      show7: false,
      show9: false,
      wenzhanghuifu: "",
      show8: false,
      Twicereply: {
        author: {
          username: ""
        },
        bereply_id: {
          username: ""
        }
      },
      ZhenTwice: "",
      zhentwohuifu: []
    };
  },
  components: {
    Divider,
    XTextarea,
    Group,
    XInput,
    Popup,
    TransferDom
  },
  methods: {
    TwiceReply: function(ev) {
      ev.preventDefault();
      var value = ev.currentTarget.name;
      // console.log(value);
      // console.log(this.ZhenTwice);
      this.$axios
        .post("/top/TwiceReply", {
          content: this.ZhenTwice,
          once: value
        })
        .then(data => {
          // console.log(data);
          if (data.data.error == 1) {
            alert("心累");
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    showsw: function(ev) {
      ev.preventDefault();
      this.show8 = false;
    },
    erji: function(ev) {
      ev.preventDefault();
      this.show8 = true;
      var that = this;
      var value = ev.currentTarget.name;
      console.log(value);
      this.$axios
        .post("/top/twicere", {
          OnceRe: value
        })
        .then(data => {
          console.log(data);
          if (data.data.error == 1) {
            alert(data.data.message);
          } else {
            that.Twicereply = data.data.data;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    erjii: function(ev) {
      ev.preventDefault();
      this.show9 = true;
      var that = this;
      var value = ev.currentTarget.name;
      this.$axios
        .post("/top/gettwoReply", {
          once: value
        })
        .then(data => {
          // console.log(data.data.data);
          that.zhentwohuifu = data.data.data;
        })
        .catch(err => {
          console.log(err);
        });
    },
    bbb: function() {
      this.num++;
      console.log(this.num);
      if (this.num % 2 == 0) {
        console.log("true");
        this.show2 = true;
      } else {
        this.show2 = false;
      }
    },
    iii: function() {
      this.num2++;
      // console.log(this.num);
      if (this.num2 % 2 == 0) {
        console.log("true");
        this.show3 = true;
      } else {
        this.show3 = false;
      }
    },
    whuifu: function(ev) {
      var that = this;
      ev.preventDefault();
      var value = ev.currentTarget.name;
      var ids = this.$route.params;
      if (this.show2 == true) {
        this.recontent = this.recontent + "B";
      }
      if (this.show3 == true) {
        this.recontent = this.recontent + "I";
      } else {
        this.recontent = this.recontent;
      }
      // console.log(this.recontent); //有样式的内容
      // console.log(ids); //文章的id
      // console.log(value); // 文章发布者的id
      this.$axios
        .post("/top/article_reply", {
          styleB: this.recontent,
          article_id: ids,
          article_author: value
        })
        .then(data => {
          console.log(data);
          if (data.data.error == 1) {
            alert(data.data.message);
          } else {
            alert(data.data.message);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    onEvent(event) {
      //   console.log("on", event);
    },
    shoucang: function(ev) {
      ev.preventDefault();
      var value = ev.currentTarget.name;
      console.log(value);
      this.$axios
        .post("/top/shouc", {
          article: value
        })
        .then(data => {
          console.log(data.data);
          if (data.data.error == 1) {
            alert(data.data.message);
          } else {
            this.show1 = true;
            alert(data.data.message);
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  mounted: function() {
    var that = this;
    var ids = this.$route.params;
    const moment = require("moment");
    moment.locale("zh-cn");
    this.$axios
      .post("/top/lbig", {
        arid: ids
      })
      .then(data => {
        if (data.data.error == 1) {
          alert(data.data.message);
        } else {
          data.data.data.create_time = moment(
            data.data.data.create_time
          ).fromNow();
          that.wenzhang = data.data.data;
        }
      })
      .catch(err => {
        console.log(err);
      });

    this.$axios
      .post("/top/getarticle_reply", {
        article_id: ids
      })
      .then(data => {
        // console.log(data.data.data);
        var data = data.data.data;
        data.forEach(function(datas) {
          // console.log(datas.content.charAt(datas.content.length - 1));
          // console.log(datas.create_time);
          if (datas.content.charAt(datas.content.length - 1) == "B") {
            that.show4 = true;
            that.show1 = false;
          }
          if (datas.content.charAt(datas.content.length - 1) == "I") {
            that.show5 = true;
            that.show1 = false;
          }
          if (datas.content.charAt(datas.content.length - 1) == "U") {
            that.show6 = true;
            that.show1 = false;
          }
          if (datas.content.charAt(datas.content.length - 1) == "C") {
            that.show7 = true;
            that.show1 = false;
          }
        });
        that.wenzhanghuifu = data;
        // console.log(that.wenzhanghuifu);
      })
      .catch(err => {
        console.log(err);
      });
  }
};
</script>
<style lang="less" scoped>
@import "~vux/src/styles/close.less";

ul {
  padding: 0 0;
}
li {
  list-style: none;
}
.position-horizontal-demo {
  position: relative;
  height: 100%;
  // position: absolute
}
.vux-close {
  position: absolute;
  color: #113633;
  right: 10px;
  top: 38px;
  z-index: 10;
  cursor: pointer;
  // color: wheat
  // background:transparent;
}
.icom span:hover {
  background: #ccc;
  // color: white
}

.icom span {
  /* border: solid 1px black; */
  padding: 2px 3px;
  border-radius: 5px;
}

.HuiFu li .username {
  float: left;
  width: 80%;
}

.HuiFu li .pimg {
  float: left;
  width: 20%;
}

.HuiFu li {
  margin-top: 1%;
  padding-top: 3%;
  list-style: none;
  border-top: solid 1px #ccc;
  overflow: hidden;
}

.HuiFu {
  padding: 0 5px;
  /* margin-bottom: 15%; */
}

.yangshi span {
  margin: 1.5% auto;
  display: inline-block;
  width: 24%;
  box-shadow: -1px -1px 5px #12a7b4;
  text-align: center;
  font-weight: 900;
  cursor: pointer;
}

.yangshi span:hover {
  box-shadow: none;
}

h3 {
  color: black;
  /* color: white */
  /* color: wheat */
}

a {
  color: #12a7b4;
  text-decoration: none;
  cursor: pointer;
}

.dierhang a {
  margin-left: 5px;
  /* margin-right: 10px; */
  padding-right: 5px;
  border-right: solid 1px #aaa;
  padding-left: 5px;
  transition: all 0.5s;
}

.dierhang a:hover {
  background: #12a7b4;
  color: yellow;
}

.coonent {
  color: black;
  font-size: 16px;
  margin-bottom: 5%;
}

.fonts a {
  display: inline-block;
  width: 19%;
  text-align: center;
  font-size: 16px;
  background: #ccc;
  padding: 6% 0;
  border-radius: 50%;
  text-align: center;
}

.fonts a span:hover {
  color: #12a7b4;
}
.Twice {
  position: relative;
  // top: -10px;
}
.Twice1 {
  position: relative;
  top: 7%;
  box-shadow: -1px -1px 8px 1px wheat inset;
  height: 100%;
}
.Logo {
  position: absolute;
  left: 25%;
  top: -4.8%;
  border-radius: 1px;
  z-index: 8;
  box-shadow: -2px 2px 5px #12a7b4;
}
.replys {
  margin-top: 33px;
}
</style>